<template>
    <div>
        <!-- 图片主体区域 -->
        <div>
            <ul>
            <!--  v-show="index===num" 只显示当前需要显示的图片，其他的都隐藏-->
              <li v-for="(imgUrl,index) in bannerList" :key="index" style="float:left" v-show="index===num">
                  <a href="#">
                      <img :src=imgUrl style="width:278px;height:155px">
                  </a>
              </li>
            </ul>
        </div>

        <!-- 小圆圈 -->
        <div class="bar">
          <span v-for="(imgUrl,index) in bannerList" :key="index" class="circle" :class="{'activeCircle':index===num}" @click="circleClick(index,imgUrl)"></span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'carousel',
  data () {
    return {
      num: 0, // 当前正在展示的图片的索引
      // bannerList存储要轮播图片的地址
      bannerList: [
        'https://cdn.jsdelivr.net/gh/wangzhenyi66/picgo/img/zhanweitumao1.gif',
        'https://cdn.jsdelivr.net/gh/wangzhenyi66/picgo/img/acid.png',
        'https://cdn.jsdelivr.net/gh/wangzhenyi66/picgo/img/小火龙.jpg'
      ],
      timer: null // 计时器
    }
  },
  methods: {
    // 自动轮播
    autoPlay () {
      this.num++
      if (this.num === this.bannerList.length) {
        this.num = 0
      }
    },
    // 设置计时器，周期循环，在created生命周期调用这个函数
    set () {
      this.timer = setInterval(this.autoPlay, 2000)
    },
    // 删除定时器
    // 主要用于优化效果,（比如设置定时器为2秒，当在1.9秒的时候点击了左/右箭头/小圆圈，则会出发事件切换图片，但是会出现在0.1秒后又会立马触发定时器事件（0.1秒后立马又切换图片）的问题；
    // 解决这个问题的方法是 在点击 箭头、圆圈时，把定时器清除掉（clear方法），然后切换图片后再重新设置定时器（set方法））
    clear () {
      clearInterval(this.timer)
    },
    // 点击小圆圈
    circleClick (index, imgUrl) {
      this.clear()
      this.num = index
      this.set()
    },
    // created生命周期
    created () {
      this.set()
    }
  }
}
</script>

<style scoped>

ul li {
  list-style: none;
  position: relative;
}

.bar {
  position: relative;
  top: 120px;
  left: -165px;
}

.bar span {
  width: 8px;
  height: 8px;
  border: 1px solid #5F4AC1;
  border-radius: 50%;
  background: #fcfcfc;
  display: inline-block;
  margin-right: 10px;
}

.activeCircle {
  background: #5F4AC1 !important;
}
</style>
